<template>
	<div>
		
		<div class="home-top-dbox">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item>
					<img src="https://cdn.it120.cc/apifactory/2018/11/07/76d9a2c2bd56c4ac0497b5d360c6bc06.png" width="100%" height="375px">
				</van-swipe-item>
				<van-swipe-item>
					<img src="https://cdn.it120.cc/apifactory/2018/11/06/1a6dc56d16dcec64639d9ea624ebdd46.jpg" width="100%" height="375px">
				</van-swipe-item>
				<van-swipe-item>
					<img src="https://cdn.it120.cc/apifactory/2018/11/07/ad7e06f98e8910ff789b6e577b36c20b.jpg" width="100%" height="375px">
				</van-swipe-item>
			</van-swipe>
			
			<div class="home-top">
				<div style="display: flex;justify-content: space-around;margin: 10px 0;z-index:-1">
					<img src="../assets/0801.png" width="42">
					<img src="../assets/0802.png" width="42">
					<img src="../assets/0803.png" width="42">
					<img src="../assets/0804.png" width="42">
				</div>
				<div style="display: flex;justify-content: space-around;margin: 10px 0;">
					<div>签到</div>
					<div>礼券</div>
					<div>砍价</div>
					<div>专栏</div>
				</div>
			</div>
		</div>
		
		
		<div>
			<div class="home-content-top">
				全民砍价 
				<van-icon name="arrow" />
			</div>
			
			<div v-show="item.id>99761" v-for="(item,index) in kjgoods" style="display: flex;padding: 10px;background-color: white;border-bottom: 1px solid lightgray;">
				<img style="border-radius: 5px;" :src="item.pic" width="110px" height="110px">
				<div style="padding: 5px;display: flex;flex-direction: column;justify-content: space-between;width: 100%;">
					<div>
						<div style="font-size: 15px;">{{item.name}}</div>
						<div style="font-size: 12px;color: gray;">{{item.characteristic}}</div>
					</div>
					
					<div style="display: flex;justify-content: space-between;align-items: center;">
						<div style="font-size: 15px;">
							<div style="color: rgb(200, 27, 11);">￥{{item.minBuyNumber}}</div>
							<div>低价</div>
						</div>
						<div style="color: gray;font-size: 15px;">
							<div>￥{{item.pingtuanPrice}}</div>
							<div>原价</div>
						</div>
						<div style="color: gray;font-size: 15px;">
							<div>{{item.stores}}件</div>
							<div>限量</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div>
			<div class="home-content-top">
				精选专题 
				<van-icon name="arrow" />
			</div>
			
			<div style="display: flex;overflow-x: scroll;">
				<div class="home-scroll-item" v-for="(item,index) in scrollList">
					<img style="border-radius: 5px;" :src="item.pic" width="320px" height="200px">
					
					<div style="height: 60px;display: flex;justify-content: space-around;flex-direction: column;">
						<div style="font-size: 14px;" class="van-ellipsis">{{item.title}}</div>
						<div style="font-size: 12px;color: gray;" class="van-ellipsis">{{item.descript}}</div>
					</div>
					
				</div>
			</div>
		</div>
		
		<div>
			<div class="home-content-top">
				人气推荐 
				<van-icon name="arrow" />
			</div>
			
			<div style="display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;">
				<div v-for="(item,index) in kjgoods" @click="toDetails(item.id)" style="width: 48%;">
					<img :src="item.pic" width="100%" height="210px">
					
					<div style="height: 80px;display: flex;flex-direction: column;justify-content: space-around;">
						<div class="van-ellipsis">{{item.name}}</div>
						<div class="van-ellipsis" style="color: gray;font-size: 14px;">{{item.characteristic}}</div>
						<div style="color: rgb(200, 27, 11);font-size: 14px;">￥{{item.minBuyNumber}}</div>
					</div>
					
				</div>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		data(){
			return{
				kjgoods:[],
				scrollList:[]
			}
		},
		mounted() {
			this.$netClient.bargain({
			}).then(res=>{
				// window.console.log(res.data.data.goodsMap)
				this.kjgoods = res.data.data.goodsMap
			}).catch(err=>{
				window.console.log(err)
			})
			
			
			this.$netClient.list({
			}).then(res=>{
				// window.console.log(res.data.data)
				this.scrollList = res.data.data
				
			}).catch(err=>{
				window.console.log(err)
			})
		},
		methods:{
			toDetails(id){
				this.$router.push({
					path:'/details',
					query:{
						id
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.home-top-dbox{
		position: relative;
	}
	.home-top{
		width: 100%;
		height: 100px;
		background-color: white;
		border-radius: 30% 30% 0 0;
		position: absolute;
		bottom: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 15px;
	}
	.home-content-top{
		width: 100%;
		height: 50px;
		background-color: white;
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid lightgray;
	}
	.home-scroll-item{
		width: 320px;
		margin: 0 5rem;
	}
</style>
